iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

動起來吧!Web Motion 動態特效網頁學習日記系列 第 14

JS Library 學習筆記:首先當然來試試 jQuery (三)

  • 分享至 

  • xImage
  •  

除了監聽事件外,jQuery也提供了定義好的動態效果函式,讓開發者直接使用,並透過傳入相關參數,去自訂自已的效果。主要分成Basic、Fading、Sliding和Custom效果,可以依照需求選擇合適的函式,以下想從效果最單純自然的Fading談起。

Fading系列:

目前提供了四種函式,主要是控制opacity去產生漸變的效果,第一個參數為時間數值,以毫秒為單位,也可以直接使用定義好的'fast'(被定義為200毫秒) 和 'slow'(被定義為600毫秒)。

控制網頁元件出現與消失的fadeIn()、fadeOut()、fadeToggle()
fadeIn()在 css 設定display: none;暫時隱藏後,利用其他網頁元件去監聽事件,當事件達成時這個功能會去控制網頁元件的opacity,產生如其名的「漸入」方式出現;而fadeOut()則是相反,具有漸出至消失的效果。
fadeToggle():如果想要漸入與漸出並存,具有開關的效果,可以使用這個函式會相當方便。

//fadeIn()漸入,在 #my-div 的css需先設定display: none;
$('#my-button').click(function(){
    $( '#my-div' ).fadeIn("slow")
})
//fadeOut()漸出至消失
$('#my-button').click(function(){
    $( '#my-div' ).fadeOut("slow")
})
//fadeToggle = fadeIn + fadeOut
$('#my-button').click(function(){
    $( '#my-div' ).fadeToggle("slow")
})

控制網頁元件漸變至某個opacity狀態:fadeTo()
剛剛有提到上面的效果其實式控制網頁元件的opacity屬性,而且函式依照時間執行結束後,只能完全出現或完全消失;如果想控制漸變的結束階段、希望不要只有0或1的結果的話,就可以用fadeTo()函式。

$('#my-button').click(function(){
    $( '#my-div' ).fadeTo("fast",0.5)
})

因為需定義漸變最後的opacity數值,第二個參數需傳入相關數值。


上一篇
JS Library 學習筆記:首先當然來試試 jQuery (二)
下一篇
JS Library 學習筆記:首先當然來試試 jQuery (四)
系列文
動起來吧!Web Motion 動態特效網頁學習日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言